<template>
  <div>
    <h1>标题</h1>
    <div>
      <button @click="checkBooks">查看所有未被借阅书籍</button>
    </div>
    <ul>
      <li v-for="book in books" :key="book.book_id">
        {{ book.bookId }} - {{ book.bookName }}
      </li>
    </ul>
    <form @submit.prevent="submitForm">
      <label for="bookId">输入要借阅的书籍ID:</label><br />
      <input
        v-model="bookId"
        type="text"
        id="bookId"
        name="bookId"
        required
      /><br />
      <input type="submit" value="提交" />
    </form>
    <br />
    <form @submit.prevent="returnBook">
      <label for="returnBookId">输入要还的书籍ID:</label><br />
      <input
        v-model="returnBookId"
        type="text"
        id="returnBookId"
        name="returnBookId"
        required
      /><br />
      <input type="submit" value="还书" />
    </form>
    <br />
    <!-- 新增查看用户信息的按钮 -->
    <button @click="fetchUserInfo">查看用户信息</button>
    <!-- 显示用户信息 -->
    <ul>
      <li v-for="user in userInfo" :key="user.username">
        {{ user.username }} - {{ user.password }} - {{ user.borrowedBookId }} - {{ user.borrowedTime }}
      </li>
    </ul>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "ComponentTwo",
  data() {
    return {
      books: [],
      bookId: "",
      returnBookId: "",
      username: localStorage.getItem("username"),
      userInfo: [], // 新增一个数据属性来存储用户信息
    };
  },
  methods: {
    async checkBooks() {
      try {
        const response = await axios.post(
          "http://localhost:8889/api/user/get_booklist0"
        );
        this.books = response.data.data;
      } catch (error) {
        console.error("请求失败：", error);
      }
    },
    async submitForm() {
/*      const bookExists = this.books.some(
        (book) => book.bookId === this.bookId
      );
      if (!bookExists) {
        alert("借阅失败：不存在该ID的书籍");
        return;
      }*/

      const currentTime = new Date().toISOString();

      try {
        const response = await axios.post(
          "http://localhost:8889/api/user/borrow_book",
          {
            bookId: this.bookId,
            username: this.username,
            borrowedtime: currentTime,
            borrowedBookId: this.bookId //不确定这样传有没有问题，待测试
          }
        );
        console.log(response.data);
      } catch (error) {
        console.error("提交失败：", error);
      }

      this.checkBooks();
    },
    async returnBook() {
      try {
        const response = await axios.post(
          "http://localhost:8889/api/user/return_book",
          {
            bookId: this.returnBookId,
            username: this.username,
          }
        );
        console.log(response.data);
      } catch (error) {
        console.error("还书失败：", error);
      }

      this.checkBooks();
    },
    // 新增一个方法来获取用户信息
    async fetchUserInfo() {
      try {
        const response = await axios.post(
          "http://localhost:8889/api/user/get_myself", // 修改了请求的 URL
          {
            username: this.username, // 在请求体中包含用户名
          }
        );
        console.log(response.data);
        this.userInfo = response.data;
      } catch (error) {
        console.error("请求失败：", error);
      }
    },
  },
};
</script>

<style scoped>
/* 你可以在这里添加你的 CSS 样式 */
</style>
